<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

const props = defineProps<{
  cardHolders?: string[];
  selectedCardHolder?: string | null;
}>();

const emit = defineEmits<{
  (e: 'toggleCategoryFilter'): void;
  (e: 'toggleCardHolderFilter'): void;
  (e: 'selectCardHolder', holder: string): void;
}>();
</script>

<template>
  <div class="filter-section">
    <!-- 筛选条件 -->
    <div class="filter-header flex justify-between items-center py-4 border-b border-gray-800">
      <div class="filter-item flex items-center cursor-pointer" @click="emit('toggleCategoryFilter')">
        <span>卡片分类</span>
        <svg class="w-4 h-4 ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7 10L12 15L17 10H7Z" fill="currentColor"/>
        </svg>
      </div>
      <div class="divider mx-4 h-6 w-px bg-gray-700"></div>
      <div class="filter-item flex items-center cursor-pointer" @click="emit('toggleCardHolderFilter')">
        <span>持卡人</span>
        <svg class="w-4 h-4 ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7 10L12 15L17 10H7Z" fill="currentColor"/>
        </svg>
      </div>
    </div>
    
    <!-- 持卡人下拉菜单 (可以根据需要显示/隐藏) -->
    <div v-if="false" class="card-holder-dropdown bg-gray-800 rounded-md mt-2 p-2 absolute z-10">
      <div 
        v-for="holder in cardHolders" 
        :key="holder"
        class="holder-item py-2 px-3 cursor-pointer hover:bg-gray-700 rounded"
        :class="selectedCardHolder === holder ? 'bg-gray-700' : ''"
        @click="emit('selectCardHolder', holder)"
      >
        {{ holder }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.filter-item {
  transition: all 0.3s ease;
}

.filter-item:hover {
  opacity: 0.8;
}

.card-holder-dropdown {
  width: 200px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
</style>